<template>
  <el-dialog title="添加项目" :close-on-click-modal="false" :visible="true" v-model="show" width="600px" append-to-body>
    <el-form ref="dataRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="项目名称" prop="projName">
          <el-input v-model="form.projName" placeholder="请输入项目名称" />
      </el-form-item>
      <el-form-item label="项目标识" prop="projKey">
          <el-input v-model="form.projKey" placeholder="请输入项目标识" />
      </el-form-item>
    </el-form>  
    <template #footer>
      <div class="dialog-footer">
          <el-button @click="cancel" :disabled="data.loading">取 消</el-button>
          <el-button type="primary" @click="submitForm" :disabled="data.loading" :loading="data.loading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 项目添加对话框组件
 * 功能：
 * - 提供新增项目的表单界面
 * - 表单字段验证
 * - 提交数据到后端API
 * - 处理操作结果反馈
 * - 与父组件通过事件通信
 */
import { ref, reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { addProject } from '@/api/project'

const dataRef = ref(null)

const props = defineProps(['openKey'])
const emit = defineEmits(['setMData'])
const router = useRouter()

// 组件状态管理
const data = reactive({
  // 表单数据对象
  form: {},
  // 表单验证规则
  rules: {
    projName: [{ required: true, message: "项目名称不能为空", trigger: "blur" }],
    projKey: [
      { required: true, message: "项目标识不能为空", trigger: "blur" },
      { min: 2, message: "项目标识至少需要2个字符", trigger: "blur" },
      { pattern: /^\S*$/, message: "项目标识不能包含空格", trigger: "blur" }
    ]
  },
  // 对话框显示状态
  show: true,
  // 加载状态
  loading: false
})

const { form, rules, show } = toRefs(data)

/**
 * 提交表单数据
 * 处理表单验证和项目添加逻辑
 * 自动区分开发/生产环境
 */
async function submitForm() {
  // 整体表单验证
  try {
    await dataRef.value.validate()
  } catch (error) {
    console.log('表单验证失败:', error)
    return
  }

  data.loading = true
  try {
    let res
    if (import.meta.env.DEV) {
      // 开发环境下使用mock数据
      const { mockAddProject } = await import('@/api/mock/projectMock')
      res = mockAddProject(form.value)
      if (!res.data) {
        throw new Error('Mock新增失败')
      }
    } else {
      res = await addProject(form.value)
      if (!res || !res.data) {
        throw new Error('API返回数据异常')
      }
    }
    
    console.log('新增项目成功:', res.data)
    ElMessage.success('新增成功')
    cancel()
    // 直接触发刷新事件，不再跳转页面
    emit('setMData', 'refreshList', true)
    console.log('已发送refreshList事件')

  } catch (error) {
    console.error('新增项目失败:', error)
    ElMessage.error(`新增失败: ${error.message}`)
  } finally {
    data.loading = false
  }
}

/**
 * 取消操作
 * 关闭对话框并通知父组件
 */
function cancel() {
  emit('setMData', props.openKey, false)
}
</script>
